{% extends "homepage.html" %}

{% block content %}

<script type="text/javascript" src="{{ url_for('mwf.static', filename='classical_modular_form_util-functions.js') }}"></script>
<script type="text/javascript" src="{{ url_for('mwf.static', filename='classical_modular_form_scripts.js') }}"></script>


{% if info.error is defined %}

<h1>There was an error in meeting your previous request. Please change parameters.</h1>

<h2> Error message: </h2>% extends "homepage.html" %}

<div>
{{ info.error | safe }}
</div>
{% endif %}
<!-- To make an interface that is easier to read we implement each case of input separately -->

<!-- {{ info | safe }} $("div").data("option",{"start":1}); -->

<script>
allowed_levels= {{info.list_of_levels}} <!-- these are the levels which are in the database-->

$(document).ready(function() {
$("#l_list").data("start",1); $("#l_list").data("len",20); $("#l_list").data("min",1);
$("#l_list").data("name","level");
$("#w_list").data("start",1); $("#w_list").data("len",20); $("#w_list").data("min",1);
$("#w_list").data("name","weight");
$("#char_selection").data("char",0);
 print_list("#l_list");
 print_list("#w_list");
 });




function shift(id,lr) {
   var start = $(id).data("start");
   var min = $(id).data("min");
   var len = $(id).data("len");
   if (lr == "left")
      start = start - len;
   if (lr == "right")
      start = start + len;
   if (start <= min) {
      start = min;
   }
   $(id).contents().detach();
   $(id).data("start",start);
   $(id).data("min",min);
   $(id).data("len",len);
 /*alert("start:"+$(id).data("start")+" "+len+" "+min); */
   print_list(id);

}

function print_list(id) {
    var min = $(id).data("min");
    var start = $(id).data("start");
    var len = $(id).data("len");
    var name = $(id).data("name");
    var url = getAbsolutePath();
    if (start > min) {
       $(id).append("<a id='go_left' href='#' onclick=\"shift('"+id+"','left')\" style=\"display:inline\"><small>&lt;&lt;</small></a>");
    };
    var char = $("#char_selection").data("char");
    if (char == 0) {
       s = "&character=0"
    } else {
       s = "&character=all"
    }
    for (var i = start; i < len+start; i++) {
        /*s = "<a href="+url+"?"+name+"="+i+" style=\"display:inline\">" + i + "</a> ";*/
	/*s = "<a href='' onclick='set_value(\""+id+"\","+i+");document.browse.submit()' >" + i + "</a> ";*/
	if (name=="level" && jQuery.inArray(i, allowed_levels) > -1) {
	    s = "<a href=\"javascript:set_value('"+id+"',"+i+")\" style=\"display:inline\">" + i + "</a> ";
	    $(id).append(s);
	}
    }
    if(i < {{info.max_level}} ){
	   $(id).append("<a id='go_right' href='#' onclick=\"shift('"+id+"','right')\" style=\"display:inline\"><small>&gt;&gt;</small></a>");
    }

};

function set_value(id,val) {
  var name = $(id).data("name"); 			   
  document.forms.browse[name].value=val;
  $(id).data("value",val);
  document.browse.submit();			   
}

function getAbsolutePath() {
    var loc = window.location;
    var pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/') + 1);
    return loc.href.substring(0, loc.href.length - ((loc.pathname + loc.search + loc.hash).length - pathName.length));
}

</script>
{{ info | safe }}
<table>
  <tr>
    <td>
      <form name="browse" method = "get" action="{{url_for('.render_maass_waveforms')}}">
	<h1>Browse Maass waveforms</h1>
	<input type="hidden" name="weight" value=""/>
	<input type="hidden" name="level" value=""/>
	<table width="100%">
	  <tr>
	    <td valign="top">Level:</td>
	    <td>
	      <div id="l_list" data-hidden="true" data-start='' data-len='' data-value='' data-name=''></div>
	    </td>
	  </tr>
	  <tr>
        </table>
      </form>
    </td>
  </tr>
  <tr>
  <tr>
    <td>

	<h3>Find a specific Maass form</h3>
	<form name="search" method = "post" action="{{url_for('.render_maass_waveforms')}}">	  <input type="text" name="jump_to" value=""> <span class="formexample">e.g. 1.12 (gives the 12th eigenvalue on the modular group)</span>
	  <button type="submit" value="Jump">Jump</button>
	</form>
    </td>
  </tr>
  <tr>
    <td>
      <form name="search" method = "post" action="{{url_for('.render_maass_waveforms')}}">
	<input type="hidden" name="search" value="true"> 
	<input type="hidden" name="rec_start" value="0"> 
	<h3>Search</h3>
	<table class="">
	  <tr>
	    <td>Level in range:</td>
	    <td> 
	      <input type="text" name="level_lower" value="" /> --
	      <input type="text" name="level_upper" value="" /> 
	      <span class="formexample">e.g. 1 -- 10</span>
	    </td>
	  </tr>
	  <tr>
	    <td>R in range:</td>
	    <td> 
	      <input type="text" name="ev_lower" value=""> --
	      <input type="text" name="ev_upper" value=""> 
	      <span class="formexample">e.g. 9.5 -- 10.5</span>
      </td>
	  </tr>

	  <tr>
	    <td>Weight:</td>
	    <td> 
	      <input type="text" name="weight" value="" /> 
	      <span class="formexample">e.g. 1 (leave blank for weight 0)</span>
	    </td>
	  </tr>
	  <tr>
	    <td>Character:</td>
      <td>
        <input type="text" name="character" value="" />
          <span class="formexample">e.g. 1 (0 means trivial character, leave blank for all characters)</span>
      </td>
	  </tr>
	  <tr>
	    <td>
	      <button type="submit" name="Submit" value="Search">Search</button>
	    </td>
	    <td>
	      Show number of records:
	       <select name="limit">
		       <option value="20">20</option>
		       <option value="50">50</option>
		       <option value="100">100</option>
		       <option value="-1">all</option>
	      </select>
	    </td>
    </tr>
   </form>
   </table>
   </td>
  </tr>
</table>

</div>

{% endblock content %}
